<template>
  <h2>客户订单</h2>
  <div style="margin-bottom: 10px; display: flex; gap: 8px;">
    <el-input v-model="search.custName" placeholder="客户名" size="small" style="width:100px;"/>
    <el-input v-model="search.itemName" placeholder="产品名" size="small" style="width:100px;"/>
    <el-input v-model="search.totalAmountMin" placeholder="最低交易金额" size="small" style="width:100px;"/>
    <el-input v-model="search.totalAmountMax" placeholder="最高交易金额" size="small" style="width:100px;"/>
    <el-date-picker
        v-model="search.orderDateBegin"
        type="datetime"
        placeholder="订单时间-开始"
        format="YYYY/MM/DD hh:mm:ss"
        value-format="YYYY-MM-DD hh:mm:ss"
        size="small"
        style="width:125px;"
    />
    <el-date-picker
        v-model="search.orderDateEnd"
        type="datetime"
        placeholder="订单时间-结束"
        format="YYYY/MM/DD hh:mm:ss"
        value-format="YYYY-MM-DD hh:mm:ss"
        size="small"
        style="width:125px;"
    />
    <el-input v-model="search.state" placeholder="订单状态" size="small" style="width:100px;"/>
    <el-button type="primary" size="small" @click="handleSearch">查找</el-button>
    <el-button size="small" @click="resetSearch">重置</el-button>
  </div>

  <el-table :data="tableData" style="width: 100%">
    <!-- 第一层：表头 -->
    <el-table-column fixed prop="custName" label="客户名"/>
    <el-table-column prop="itemName" label="产品名"/>
    <el-table-column prop="price" label="单价"/>
    <el-table-column prop="quantity" label="交易数量"/>
    <el-table-column prop="totalAmount" label="总交易金额"/>
    <el-table-column prop="orderDate" label="交易时间"/>
    <el-table-column prop="state" label="交易状态"/>
    <el-table-column prop="paymentMethod" label="支付方式"/>
  </el-table>

  <!-- 分页组件 -->
  <div class="pagination-block">
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 15, 30]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import axios from "axios";
import {ref, onMounted, watch} from 'vue'
import type {ComponentSize} from 'element-plus'
import {ElMessage} from "element-plus";

// 分页相关
const currentPage = ref(1)
const pageSize = ref(5)
const total = ref(0)
const size = ref<ComponentSize>('default')
const background = ref(true)
const disabled = ref(false)

// 表格数据
const tableData = ref([])

// 搜索相关
const search = ref({
  custName: null,
  itemName: null,
  totalAmountMin: null,
  totalAmountMax: null,
  orderDateBegin: null,
  orderDateEnd: null,
  state: null
});

function handleSearch() {
  loadData()
  // 如果需要请求后端，可以在这里发请求
}

function resetSearch() {
  search.value = {
    custName: null,
    itemName: null,
    totalAmountMin: null,
    totalAmountMax: null,
    orderDateBegin: null,
    orderDateEnd: null,
    state: null
  }
  loadData()
}

// 监听分页变化，自动加载数据
watch([currentPage, pageSize], () => {
  loadData()
})

// 页面首次加载
onMounted(() => {
  loadData()
})

function loadData() {
  // 你的后端接口如果是 /customer/page/1/5 这样的
  const url = `http://localhost:52010/order/page/${currentPage.value}/${pageSize.value}`

  // 只传递有值的搜索条件
  const params = {}
  Object.keys(search.value).forEach(key => {
    if (search.value[key]) {
      params[key] = search.value[key]
    }
  })

  axios.get(url, {params})
      .then(response => {
        const res = response.data
        if (res.code === 200) {
          tableData.value = res.data.records || []
          total.value = res.data.total || 0
        } else {
          ElMessage.error(res.message || '请求失败')
        }
      }).catch((error) => {
    const msg = error.response?.data?.message || error.message || '请求异常'
    ElMessage.error(msg)
  })
}

// 可选：分页事件处理器
const handleSizeChange = (val: number) => {
  pageSize.value = val
  currentPage.value = 1 // 改变pageSize时重置到第一页
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
}
</script>

<style scoped>
.pagination-block {
  display: flex;
  justify-content: center; /* 水平居中 */
  margin-top: 10px; /* 距离上方10px */
}
</style>